import React, { memo, useEffect, useState, useCallback } from "react";
import { message, Switch, Table, Pagination } from "antd";
import { Rightadminwrap } from "./style";
import request from "@/service/request";
export default memo(function Rightadmin() {
  const [userlist, setUserlist] = useState([]);
  //每一页的数量
  const [pagesize, setPagesize] = useState(5);
  //当前在第几页
  const [currentindex, setCurrentindex] = useState(0);
  useEffect(() => {
    request.get("travel/ALLusers").then((res) => {
      setUserlist(res);
    });
  }, []);
  const pagechange = useCallback((page, size) => {
    setPagesize(size);
    setCurrentindex((page - 1) * size);
  }, []);
  //改变发表博客权限
  const onChange1 = useCallback((checked, r, c) => {
    request.get(`travel/canpubblog?which=${c}&&id=${r.id}`).then((res) => {
      message.success("修改权限成功");
      request.get("travel/ALLusers").then((res) => {
        setUserlist(res);
      });
    });
  }, []);
  //改变发表评论权限权限
  const column1 = [
    {
      title: "用户名",
      dataIndex: "userName",
      key: "userName",
      align: "center",
      width: 70,
      ellipsis: true,
    },
    {
      title: "昵称",
      dataIndex: "nickName",
      key: "nickName",
      align: "center",
      width: 70,
      ellipsis: true,
    },
    {
      title: "权限",
      width: 90,
      children: [
        {
          title: "能否发表文章",
          dataIndex: "pubblog",
          key: "pubblog",
          align: "center",
          width: 90,
          render: (id, record) => (
            <div className="btwrap">
              <Switch
                checked={record.pubblog}
                onChange={(checked) => onChange1(checked, record, 1)}
              />
            </div>
          ),
        },
        {
          title: "能否发表评论",
          dataIndex: "pubcom",
          key: "pubcom",
          align: "center",
          width: 90,
          render: (id, record) => (
            <div className="btwrap">
              <Switch
                checked={record.pubcom}
                onChange={(checked) => onChange1(checked, record, 2)}
              />
            </div>
          ),
        },
      ],
    },
  ];
  return (
    <Rightadminwrap>
      <div className="top">你当前的位置>权限管理</div>
      <Table
        columns={column1}
        dataSource={userlist.slice(currentindex, currentindex + pagesize)}
        rowKey={(record) => record.id}
        scroll={{ y: 400 }}
        pagination={false}
      />
      <div className="page">
        <Pagination
          pageSize={pagesize}
          total={userlist.length}
          onChange={pagechange}
          showSizeChanger
          pageSizeOptions={[5, 8, 10]}
        />
      </div>
    </Rightadminwrap>
  );
});
